<template>
	<view class="main">
		<!-- <customTopNav backColor="#000" :title='type' navBgColor="#f5f5f5" /> -->
		<!-- <u-loading-page :loading="loading"></u-loading-page> -->
		<u-navbar :title="type" autoBack placeholder></u-navbar>
		<view class="main_forms mt-1">
			<view class="main_forms_item">
				<view class="main_forms_item_left">收货人：</view>
				<view class="main_forms_item_right">
					<input type="text" placeholder="请填写收货人姓名" v-model="forms.name">
				</view>
			</view>
			<view class="main_forms_item">
				<view class="main_forms_item_left">手机号：</view>
				<view class="main_forms_item_right">
					<input type="number" maxlength="11" placeholder="请填写手机号" v-model="forms.phone">
				</view>
			</view>
			<view class="main_forms_item">
				<view class="main_forms_item_left">地区：</view>
				<view class="main_forms_item_right" @click="show=true">
					<view :class="forms.area?'':'unval'">{{forms.area?forms.area:'请选择地区'}}</view>
				</view>
			</view>
			<view class="main_forms_item" style="align-items: flex-start;">
				<view class="main_forms_item_left">详细地址：</view>
				<view class="main_forms_item_right" style="padding-top: 7rpx;">
					<u--textarea autoHeight v-model="forms.addrDesc" placeholderStyle="{color:#808080,fontSize:28rpx}"
						border="none" placeholder="街道、小区门牌号等"></u--textarea>
				</view>
			</view>
		</view>
		<view class="main_normal">
			<view :class="normal?'normalTrue':''">设置为默认地址</view>
			<view class="">
				<u-switch v-model="normal" activeColor="#04BF79" size="30"></u-switch>
			</view>
		</view>
		
		<commonButton title="保存"  @click="submit"></commonButton>
		
		
		<template>
			<u-picker @confirm="confirm" @cancel="show=false" :show="show" ref="uPicker" keyName="name" :loading="loading" :columns="columns" @change="changeHandler">
			</u-picker>
		</template>
	</view>
</template>

<script>
	import addrJson from '@/untils/addr.json'
	export default {
		onLoad(prop) {
			 
			 this.initData()
			if (prop.type == 'edit') {
				this.type = '修改地址'
				
				this.forms.name = prop.name
				this.forms.phone = prop.phone
				this.forms.area = prop.province+' '+prop.city+' '+prop.region
				this.forms.addrDesc = prop.detail
				this.normal = prop.isdefault == '1' ? true : false
				this.id = prop.address_id
				this.addrId.provinceId = prop.province_id
				this.addrId.cityId = prop.city_id
				this.addrId.districtId = prop.region_id
			} else if (prop.type == 'add') {
				this.type = '添加地址'
			}
			
			
		},
		data() {
			return {
				forms: {
					name: '',
					phone: '',
					area: '',
					addrDesc: ''
				},
				normal: true,
				type: '',
				show: false,
				columns: [
					[],
					[]
				],
				columnData: [
					[],
					[],
					[]
				],
				addrId:{
					provinceId:'',
					cityId:'',
					districtId:''
				},
				activeCode: [],
				loading: false,
				id:''
			}
		},
		methods: {
			changeNormal() {
				this.normal = !this.normal
			},
			submit() {
				if (!uni.$u.trim(this.forms.name)) {
					uni.showToast({
						title: '请填写收货人姓名',
						icon: 'none'
					})
					return
				}
				if (!uni.$u.test.mobile(this.forms.phone)) {
					uni.showToast({
						title: '请填写正确手机号',
						icon: 'none'
					})
					return
				}
				if (!this.forms.area) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					})
					return
				}
				if (!uni.$u.trim(this.forms.addrDesc)) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
				let postObj = {
					name: this.forms.name,
					phone: this.forms.phone,
					province_id: this.addrId.provinceId,
					city_id: this.addrId.cityId,
					region_id: this.addrId.districtId,
					detail: this.forms.addrDesc,
					isdefault: this.normal ? 1 : 0
				}
				if (this.type == '添加地址') {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					this.$api.addressadd(postObj).then((res) => {
						if (res.code == 1) {
							uni.hideLoading()
							uni.showToast({
								title: '添加地址成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 300)
						}
					})
				} else {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					postObj.id = this.id
					this.$api.addressedit(postObj).then((res) => {
						if (res.code == 1) {
							uni.hideLoading()
							uni.showToast({
								title: '修改地址成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 300)
						}
					})
				}
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					this.$api.leaderArea({
						pid:this.columns[columnIndex][index].id,
						level:2
					}).then((res)=>{
						if(res.code==1){
							let columns=[[...this.columns[0]],[],[]]
							columns[1]=[...res.data]
							// console.log(res.data[0].id)
							// return
							this.$api.leaderArea({
								pid:res.data[0].id,
								level:3
							}).then((res2)=>{
								if(res2.code==1){
									columns[2]=[...res2.data]
									picker.setColumnValues(1,columns[1])
									picker.setColumnValues(2,columns[2])
									this.columns=[...columns]
									this.loading=false
								}
							})
						}
					})
				}else if(columnIndex === 1){
					this.loading = true
					this.$api.leaderArea({
						pid:this.columns[columnIndex][index].id,
						level:3
					}).then((res)=>{
						if(res.code==1){
							let columns=[[...this.columns[0]],[...this.columns[1]],[]]
							columns[2]=[...res.data]
							picker.setColumnValues(1,...columns)
							this.columns=[...columns]
							this.loading=false
						}
					})
				}
			},
			confirm(e) {
				let addr=[]
				this.addrId.provinceId=e.value[0].id
				this.addrId.cityId=e.value[1].id
				this.addrId.districtId=e.value[2].id
				addr.push(e.value[0].name,e.value[1].name,e.value[2].name)
				this.forms.area=addr.join(" ")
				this.show=false
			},
			getAddressDetail() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$api.addressdetail({
					id: this.id
				}).then((res) => {
					if (res.code == 1) {
						this.forms.name = res.data.name
						this.forms.phone = res.data.phone
						this.forms.area = res.data.Area.join(" ")
						this.forms.addrDesc = res.data.detail
						this.normal = res.data.isdefault == '1' ? true : false
						this.id = res.data.address_id
						this.loading = false
					}
					uni.hideLoading()
				})
			},
			initData() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$api.leaderArea({
					pid:0,
					level:1
				}).then((res)=>{
					if(res.code==1){
						let columns=[[],[],[]]
						columns[0]=[...res.data]
						this.$api.leaderArea({
							pid:res.data[0].id,
							level:2
						}).then((res2)=>{
							if(res2.code==1){
								columns[1]=[...res2.data]
								this.$api.leaderArea({
									pid:res2.data[0].id,
									level:3
								}).then((res3)=>{
									if(res3.code==1){
										columns[2]=[...res3.data]
										this.$refs.uPicker.setColumnValues(1,columns[1])
										this.$refs.uPicker.setColumnValues(2,columns[2])
										this.columns=[...columns]
										uni.hideLoading()
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .input-placeholder {
		font-size: 28rpx !important;
		color: #808080 !important;
	}

	/deep/ .u-textarea__field {
		font-size: 28rpx !important;
		min-height: 80rpx !important;
	}

	/deep/ .u-textarea {
		padding: 0 !important;
	}

	.unval {
		color: #808080 !important;
	}

	.normalTrue {
		// color: #3369C4 !important;
	}

	.main {
		&_forms {
			&_item {
				padding: 35rpx 31rpx;
				background: #fff;
				display: flex;
				align-items: center;

				&_left {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					min-width: 145rpx;
				}

				&_right {
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 10rpx;

					input {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}

					image {
						width: 46rpx;
						height: 46rpx;
					}
				}
			}
		}

		&_normal {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
			}

			font-size: 25rpx;
			font-weight: 400;
			color: #333333;
			margin: 28rpx 32rpx;
		}

		.submit {
			margin-top: 140rpx;

			&_btn {
				margin: 0 auto;
				width: 564rpx;
				height: 90rpx;
				background: #FF8702;
				border: 1rpx solid #CCCCCC;
				border-radius: 45rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
